<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_async与await</title>
</head>
<body>
<script>
  /* 
  目标: 进一步掌握asyn/await的语法和使用
    mdn文档:
      https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
    1. async 函数
      函数的返回值为promise对象
      promise对象的结果由async函数执行的返回值决定
   
    2. await 表达式
      await右侧的表达式一般为promise对象, 但也可以是其它的值
      如果表达式是promise对象, await返回的是promise成功的值
      如果表达式是其它值, 直接将此值作为await的返回值
    
    3. 注意:
      await必须写在async函数中, 但async函数中可以没有await
      如果await的promise失败了, 就会抛出异常, 需要通过try...catch来捕获处理
  */

  // async函数的返回值是一个promise对象
  // async函数返回的promise的结果由函数执行的结果决定
  async function fn1() {
    return 1
    // throw 2
    // return Promise.reject(3)
    // return Promise.resolve(3)
    /* return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(4)
      }, 1000);
    }) */
  }

  const result = fn1()
  // console.log(result)
  result.then(
    value => {
      console.log('onResolved()', value)
    },
    reason => {
      console.log('onRejected()', reason)
    }
  )

  function fn2() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve(5)
        reject(6)
      }, 1000);
    })
  }

  function fn4() {
    return 6
  }

  async function fn3() {
    try {
      // const value = await fn2() // await右侧表达为promise, 得到的结果就是promise成功的value
      const value = await fn1()
      console.log('value', value)
    } catch (error) {
      console.log('得到失败的结果', error)
    }
    
    // const value = await fn4() // await右侧表达不是promise, 得到的结果就是它本身
    // console.log('value', value)
  }
  fn3()
</script>
</body>
</html>